<template>
  <div class="alarmTypes-root">
    <formTitleVue
      title="报警等级分布"
      :selectOptions="selectOptions"
      @selectChange="selectChange"
    />
    <!-- <div id="echarts-types"></div> -->
    <myPie domId="earlyWarning-alarmTypes-echarts" height="30vh" :chartsData="chartsData" :myOption="echartsOption"/>
  </div>
</template>

<script>
import formTitleVue from "@/components/FormTitle/formTitle.vue";
import myPie from '@/components/Echarts/myPie.vue';
import { time_select_optios } from '@/utils/global.js';
import {alarmList} from "@/api/alarm/statistics";

export default {
  name: "alarmTypes",
  components: {
    formTitleVue,myPie,
  },
  props: {
    alarmTypeOptions: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      selectOptions: [
        {
          selectValue: "",
          options: this.alarmTypeOptions,
          changeFn: this.selectChange3,
        },
        {
          selectValue: "近一月",
          options:[
            { label: "近一月", value: "近一月" },
            { label: "近半年", value: "近半年" },
            { label: "近一年", value: "近一年" },
          ],
          changeFn:this.selectChange
        }
      ],
      chartsData: {
        xData: ["市政设施", "房屋建筑", "交通设施", "人员密集区域"],
        yData: [],
      },
      echartsOption:{

      },
      searChForm: {
        startTime: '',
        endTime: '',
        type:4,
        modeType:"",
      },
    };
  },
  methods: {
    selectChange3(item){
      this.searChForm.modeType = item
      this.search()
    },
    selectChange(item) {
      this.searChForm.startTime = time_select_optios[item].startTime+" 00:00:00"
      this.searChForm.endTime = time_select_optios[item].endTime+" 23:59:59"
      this.search()
    },
    search() {
      this.fetch({
        areaCode:this.$store.state.account.user.deptIds,
        ...this.searChForm,
      })
    },
    fetch(params = {}) {
      alarmList(params).then(res => {
        if (res.code == 200) {
          console.log(res.data.data)
          this.getData(res.data)
        } else {
          this.$message({
            message: this.$t('tips.systemException'),
            type: 'error'
          })
        }
      }).finally(final => {
        console.log("error")
      })
    },
    getData(data){
      let res = [
        {value:data.data[0]['level_1'], name:"一级"},
        {value:data.data[0]['level_2'], name:"二级"},
        {value:data.data[0]['level_3'], name:"三级"},
      ]
      this.chartsData.yData = [
        {
          name:"报警等级分布",
          data: res,
        }
      ]
      this.chartsData.yData.forEach(item => {
        item.data.forEach(item => {
          item.label = {
            normal:{
              show: true,
              formatter: "{b} {d}%",
            }
          }
        })
      })
    },
  },
  mounted() {
    this.selectChange(this.selectOptions[1].selectValue)
  },
};
</script>

<style lang="scss" scoped>
.alarmTypes-root {
  #echarts-types {
    height: 30vh;
  }
}
</style>
